<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="icon.css">
  <script src="../card/Card.js"></script>
    <style>
        .iconDiv {
            float: left;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            cursor: pointer;
        }
        #tip {
            width: 200px;
            position: fixed;
            margin: 0 auto;
            text-align: center;
            left: calc(50vw - 100px);
            background: #4caf50;
            line-height: 30px;
            height: 30px;
            font-size: 18px;
            border-radius: 0 0 5px 5px;
            transition: top 2s;
            top: -30px;
        }
        .show {
            top: 0px !important;
        }
    </style>
</head>
<body>
<div id="tip">复制成功</div>
<div id="icons" style="width: 80vw;margin: 30px auto;">

</div>
<script>
    let tipId = null;
    window.copy = function(text) {
        if (tipId) {
            clearTimeout(tipId);
        }
        var input = document.createElement('input');
        input.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
        input.setAttribute('value', text);
        document.body.appendChild(input);
        // input.setSelectionRange(0, 9999);
        input.select();
        var res = document.execCommand('copy');
        document.body.removeChild(input);
        document.getElementById('tip').classList.add('show');
        tipId = setTimeout(() => {
            document.getElementById('tip').classList.remove('show');
        },2000);
        return res;
    }
</script>
<script>
  var icons = document.getElementById('icons');
  Card.icons.forEach(icon => {
      icons.innerHTML += `<div class="iconDiv" icon="${icon}"><i class="inco">
                <span class="icons-product-md ${icon}"></span>
            </i></div>`;
  });
  let iconDivs = document.getElementsByClassName('iconDiv');
  for (let i = 0;i < iconDivs.length;i++) {
      iconDivs[i].onmouseover = function () {
          this.style.transform = 'scale(1.5)';
          this.style.color = '#d22cbd';
      }
      iconDivs[i].onmouseleave = function () {
          this.style.transform = 'scale(1)';
          this.style.color = '#000';
      }
      iconDivs[i].onclick = function () {
          window.copy(this.getAttribute('icon'));
      }
  }
</script>
</body>
</html>
